<template>
  <div class="templates">
    <h1>视频模板</h1>
    <p>浏览和使用各种视频模板。</p>
    <div class="content-placeholder">
      <p>模板库将显示在这里</p>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.templates {
  h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #ffffff;
  }

  p {
    color: #b0bec5;
    margin-bottom: 2rem;
  }

  .content-placeholder {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);

    p {
      color: #b0bec5;
      margin: 0;
    }
  }

  .light-mode & {
    h1 {
      color: #333333;
    }

    p {
      color: #6c757d;
    }

    .content-placeholder {
      background-color: #ffffff;
      border: 1px solid #e9ecef;

      p {
        color: #6c757d;
      }
    }
  }
}
</style>
